<template>
  <div class="main">
    <div class="datatext">
      <span class="line"></span>
      <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;筛选条件&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="line"></span>
    </div>
    <el-form style="width:100%" :inline="true" :rules="rules" :model="personnelsalesinfor" ref="personnelsalesinfor" class="personnelsalesinfor">
      <el-form-item label="购买开始时间" id="time_div" prop="start_personnelsales_time">
        <el-date-picker v-model="start_personnelsales_time" type="date" value-format="yyyy-MM-dd" placeholder="转咨询开始时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="购买结束时间" id="time_div" prop="stop_personnelsales_time">
        <el-date-picker v-model="stop_personnelsales_time" type="date" value-format="yyyy-MM-dd" placeholder="转咨询结束时间">
        </el-date-picker>
      </el-form-item>
        <el-form-item label="请选择销售人员" prop="sales">
          <el-select v-model="sale" placeholder="请选择">
            <el-option v-for="item in sales" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
    </el-form>
    <div class="datatext">
      <span class="line"></span>
      <span class="text">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;统计结果&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
      <span class="line"></span>
    </div>

    <el-button type="primary" id="statistics" @click="salesstatistics()">销售人员统计</el-button>
    <el-table :data="salesstatiData.result"     
      max-height="300"
      border
      class="tableClass">
      <el-table-column v-for="key in salesstatiData.listkey" :key="key" :prop="key"
          :label="key"></el-table-column>
    </el-table>

    <el-button type="primary" id="statistics" @click="consultantstatistics()">顾问在办统计</el-button>
    <el-table :data="consultantstatiData.result"     
      max-height="300"
      border
      class="tableClass">
      <el-table-column v-for="key in consultantstatiData.listkey" :key="key" :prop="key"
          :label="key"></el-table-column>
    </el-table>

    <el-button type="primary" id="statistics" @click="salesstatistics()">顾问切片产品促签</el-button>
    <el-table :data="salesstatiData.result"     
      max-height="300"
      border
      class="tableClass">
      <el-table-column v-for="key in salesstatiData.listkey" :key="key" :prop="key"
          :label="key"></el-table-column>
    </el-table>

    <el-button type="primary" id="statistics" @click="consultantsales()">顾问切片产品销售</el-button>
    <el-table :data="consultantsalesData.result"     
      max-height="300"
      border
      class="tableClass">
      <el-table-column v-for="key in consultantsalesData.listkey" :key="key" :prop="key"
          :label="key"></el-table-column>
    </el-table>


  </div>
</template>
<script>
import echarts from 'echarts'
export default {
  data() {
      return{
        sale:"",
        sales:[],
        salesstatiData:{
        result: [],
        listkey:[],
      },
        consultantstatiData:{
        result: [],
        listkey:[],
      },
        salesstatiData:{
        result: [],
        listkey:[],
      },
        consultantsalesData: {
        result: [],
        listkey:[],
      },
      consultantsalesData: {
        result: [],
        listkey:[],
      },
      rules: {
        stop_personnelsales_time: [{
          required: true,
          message: "购买结束时间不能为空",
          trigger: "blur"
        }],
      start_personnelsales_time: [{
        required: true,
        message: "购买开始时间不能为空",
        trigger: "blur"
      }],
      sales: [{
        required: true,
        message: "销售人员不能为空",
        trigger: "blur"
      }]
      },
      start_personnelsales_time:"",
      stop_personnelsales_time:"",
      personnelsalesinfor:{
          start_personnelsales_time:"",
          stop_personnelsales_time:"",
      },

    }
  },
  created() {
    this.getsales()
   
  },
  methods:{
    async getsales(){
      const res = await this.$ajax.get(`/salesstatistics/`);
      this.sales = JSON.parse(res.data)
      alert(this.sales)
    },
    async salesstatistics(){
      this.personnelsalesinfor.start_personnelsales_time = this.start_personnelsales_time
      this.personnelsalesinfor.stop_personnelsales_time = this.stop_personnelsales_time
      const res = await this.$ajax.post(`/salesstatistics/`, this.personnelsalesinfor);
      let obj = JSON.parse(res.data)
      if (obj.status==200){
        this.opinion =  obj.x_data
        this.opinionData = obj.value_list
      }else{
          this.$message({
            type: "warning",
            message: obj.message
            },)
          this.opinion =  []
          this.opinionData = []
          return
          }
      this.imageshow = echarts.init(document.getElementById('imageshow'))
      this.imageshow.setOption({
        title: {
          text: '人数'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}'
        },
        // legend: {
        //   orient: 'vertical',
        //   x: 'right',
        //   y: 'top',
        //   data: ['评估概率']
        // },
        xAxis: {
          data: this.opinion
        },
        yAxis: {},
        series: [{
          name: '人数',
          type: 'bar',
          data: this.opinionData,
          itemStyle: {
            emphasis: {
              shadowBlur: 2,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            color: function (params) {
              // 自定义颜色
              var colorList = ['#1ab394', "#094572"]
              return colorList[params.dataIndex]
            }
          }
        }]
      })
    }
  }
}
</script>

<style scoped lang="less">
#statistics{
  margin-left: 155px;
  width: 181px;
}
.area_class{
    top: 30px;
    left: 45px;
    font-size: 18px;
}
.billstyle{
  text-align: center;
  display:block;
  width: 200px;
  height: 30px;
  background-color: #094572;
  color: #fff;
  margin-left: 155px;
  border-radius: 10px;
  margin-top: 30px;
}
.personnelsalesinfor{
  margin-top: 30px;
}
#time_div{
  margin-left:20px;
}
.contentdiv:hover{
  background-color: #094572;
  color: #fff;
}
.contentdiv_one:hover{
  background-color: #094572;
  color: #fff;
}

.contentdiv_one{
  width: 130px;
  display: inline-block;
  border:1px solid #DCDFE6;
  background: #fff;
  color: #094572;
  padding: 10px 20px;
  border-radius: 15px;
  text-align:center;
  cursor: pointer;
  margin-left: 55px;
  margin-top: 30px;
}
.contentdiv{
  width: 130px;
  display: inline-block;
  border:1px solid #DCDFE6;
  background: #fff;
  color: #094572;
  padding: 10px 20px;
  border-radius: 15px;
  margin-left: 60px;
  text-align:center;
  cursor: pointer;
  margin-top: 30px;

}
.el-button{
  margin-left: 70px;
  border-radius: 20px;
}
#imageshow{
  width:600px;
  height:250px;
  margin-left: 300px;
  
}
.el-button.is-round{
  margin-left: 70px;
}
.el-button{
  background:#fff;
  color:#094572
}
.line {
  display: inline-block;
  width:530px;
  border-top: 1px solid #cccccc;
  vertical-align: 5px;
  margin-top: 30px;
  font-weight: bold;
}
/* 筛选条件 */
.datatext {
  // margin-top: 50px;
  height: 30px;
  line-height: 36px;
  text-align: center;
  color: #094572;
  margin-left: 10px;
}
.el-button:focus,.el-button:hover {
  background: #094572;
  border-color: #271849;
  color: #fff;
}
.el-button--primary{
    margin-left: 100px;
    width: 220px;
    height: 40px;
    font-size: 18px;
    background-color: #094572;
    border: none;
    border-radius: 10px;
    color: #FFFFFF;
    // margin-bottom: 50px;
    margin-top: 30px;
}
.el-table--border{
  margin-left: 4%;
}
.quantity{
  color: rgb(194, 187, 187)
}
.tableClass{
  margin-left: 155px;
  width: 900px;
  // height: 300px;
  margin-bottom: 30px;
}
</style>